<template>
  <base-dialog
    title="新增文件"
    ref="baseDialog"
    width="30%"
    top="15vh"
    @handleClose="handleClose"
    @handleSubmit="handleSubmit"
  >
    <div class="content">
      <el-upload
        class="upload-demo"
        drag
        ref="upload"
        :action="action"
        :headers="headers"
        :on-success="handleSuccess"
        :on-exceed="handleExceed"
        :file-list="fileList"
        :on-remove="handleRemove"
        :on-change="beforeUpload"
        :auto-upload="false"
        :limit="1"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">单个文件上传</div>
      </el-upload>
    </div>
  </base-dialog>
</template>

<script>
import store from "@/store"
import { UPLOAD_PATH } from "@/utils/settings"
export default {
  components: {},
  data() {
    return {
      dialogVisible: false,
      action: UPLOAD_PATH,
      headers: {
        Authorization: "Bearer " + store.getters.token
      },
      fileList: [],
      btnDisabled: false
    }
  },
  methods: {
    init() {
      this.$refs.baseDialog.dialogVisible = true
    },
    handleClose() {
      this.$refs.baseDialog.dialogVisible = false
      this.fileList = []
    },

    handleSubmit() {
      this.$refs.upload.submit()
    },
    handleSuccess() {
      this.$message({
        type: "success",
        message: "资料上传成功"
      })
      this.handleClose()
      this.$emit("updatePage")
    },
    beforeUpload() {
      this.btnDisabled = false
    },
    handleRemove() {
      this.btnDisabled = false
    },
    handleExceed() {
      this.$message({
        message: "文件数量超过限制",
        type: "warning"
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  display: flex;
  padding: 0 20px 0;
  margin-bottom: 50px;
  position: relative;
  .update_btn {
    position: absolute;
    top: 220px;
    left: 450px;
  }
}
.inputWidth {
  width: 230px;
}
::v-deep .el-upload-list__item-name {
  white-space: normal;
}
</style>
